import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { DatePicker, Select, Button, Spin } from 'antd';
import styles from './style/index.less';
import ReactEcharts from 'echarts-for-react';

const { RangePicker } = DatePicker;
const { Option } = Select;

@connect(({ onlineMonitor }) => ({
  scCurve: onlineMonitor.scCurve,
  ecgsbfCurve: onlineMonitor.ecgsbfCurve,
  lljcdCurve: onlineMonitor.lljcdCurve,
  szjcdCurve: onlineMonitor.szjcdCurve,
  yljcdCurve: onlineMonitor.yljcdCurve,
  loadingCurve: onlineMonitor.loadingCurve
}))
class CurveChart extends Component {

  option = {
    sc: 'scCurve',
    ecgsbf: 'ecgsbfCurve',
    lljcd: 'lljcdCurve',
    szjcd: 'szjcdCurve',
    yljcd: 'yljcdCurve',
  }

  constructor(props) {
    super(props);
    // 获取当前时间
    const year = new Date().getFullYear();
    const month = new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1);
    const day = new Date().getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate();
    this.state = {
      date: `${year}-${month}-${day}`
    }
  }

  componentDidMount() {
    this.initAllData();
  }

  // 获取页面数据
  initAllData = () => {
    this.props.dispatch({
      type: 'onlineMonitor/fetchData',
      payload: {}
    });
  }

  // 日期选择变化
  onChange = (date, dateString) => {
  }

  handleChange = (value) => {
    this.setState({ selectKey: value });
  }

  // 生成下拉框
  getSelect = () => {
    const { value } = this.props;
    const target = this.props[this.option[value]];
    return (
      <Select defaultValue={target[0].type} style={{ width: 120 }} onChange={this.handleChange}>
        {target.map(ele => {
          return (
            <Option key={ele.type} value={ele.type}>{ele.type}</Option>
          )
        })}
      </Select>
    )
  }

  // 生成echarts
  getEcharts = () => {
    const { value, loadingCurve } = this.props;
    const target = this.props[this.option[value]];
    const { selectKey, date } = this.state;
    // 生成成横坐标轴
    let xAxis = [];
    for (let i = 0; i < 24; i += 4) {
      xAxis.push(`${date} ${i >= 10 ? i : '0' + i}:00:00`);
    }
    // 处理数据
    const seriesData = target && target.filter(x => x.type === (selectKey || target[0].type))[0]['data'];
    const echartsOptions = {
      option: {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: selectKey || target[0].type,
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '9%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        },
        {
          start: 0,
          end: 100,
        }],
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      }
    }
    return (
      <Spin spinning={!loadingCurve} tip={'加载中...'}>
        <div style={{ width: '100%', height: 400 }}>
          <ReactEcharts
            style={{ height: '400px' }}
            option={echartsOptions.option}
          />
        </div>
      </Spin>
      // <CommonEchartComp {...echartsOptions} />
    )
  }

  render() {
    const { date } = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.topPicker}>
          <span className={styles.timePicker}>选择时间：</span>
          <RangePicker
            onChange={this.onChange}
            defaultValue={[moment(date, 'YYYY-MM-DD'), moment(date, 'YYYY-MM-DD')]}
          />
          <span className={styles.typePicker}>监测类型：</span>
          {/* select */}
          {this.getSelect()}
          <Button style={{ marginLeft: '10px' }} type="primary">查询</Button>
        </div>
        <div className={styles.echarts}>
          {
            this.getEcharts()
          }
        </div>
      </div>
    );
  }
}

export default CurveChart;
